<template>
  <div class="ambassador">
    <div class="title flexc">
      <img v-if="$store.state.app.language === 'zh-CN'" src="@/assets/img/activity/ambassador/title.png" alt="">
      <img v-else-if="$store.state.app.language === 'zh-TW'" src="@/assets/img/activity/ambassador/title-tw.png" alt="">
      <img v-else-if="$store.state.app.language === 'ko'" src="@/assets/img/activity/ambassador/title-ko.png" alt="">
      <img v-else src="@/assets/img/activity/ambassador/title-en.png" alt="">
    </div>
    <!-- 视频 -->
    <div class="ambassador-vedio clearfix">
      <div class="ambassador-vedio-left fl">
        <p>{{ $t('activity.onlyTen1') }}</p>
        <p>{{ $t('activity.onlyTen2') }}</p>
        <p>{{ $t('activity.limitNum') }}</p>
        <p>{{ $t('activity.allWorld') }}</p>
        <div class="btn">
          <span @click="$router.push({name: 'influencerForm'})">{{ $t('activity.signUp') }}</span>
          <span @click="$router.push({name: 'influencerInfo'})">{{ $t('activity.kownNewdex') }}</span>
        </div>
      </div>
      <div class="ambassador-vedio-right fr">
        <span class="video-btn" @click="handlePlayVideo"></span>
        <a :href="videoUrl" class="hidden" target="_blank" ref="videoHref"></a>
      </div>
    </div>
    <div class="title1 flexc">
      <img v-if="$store.state.app.language === 'zh-CN'" src="@/assets/img/activity/ambassador/title1.png" alt="">
      <img v-else-if="$store.state.app.language === 'zh-TW'" src="@/assets/img/activity/ambassador/title1.png" alt="">
      <img v-else-if="$store.state.app.language === 'ko'" src="@/assets/img/activity/ambassador/title1-ko.png" alt="">
      <img v-else src="@/assets/img/activity/ambassador/title1-en.png" alt="" style="height: 90px;">
    </div>
    <!-- 全球狂欢周 -->
    <div class="carnival-cont">
      <div class="flexb carnival-list">
        <div class="carnival-item carnival-item-left back1 flexb">
          <div class="carnival-item-cont">
            <img src="@/assets/img/activity/ambassador/twitter.png" alt="">
            <p>{{ $t('activity.globalWeekTitle1') }}</p>
            <p>{{ $t('activity.globalWeekCont1') }}</p>
          </div>
          <span class="date">{{ $t('activity.time1') }}</span>
        </div>
        <div class="carnival-item carnival-item-right back2 flexb">
          <div class="carnival-item-cont">
            <img src="@/assets/img/activity/ambassador/imeos.png" alt="">
            <p :style="$store.state.app.language === 'en' ? 'font-size:26px; margin-bottom: 10px;' : ''">{{ $t('activity.globalWeekTitle2') }}</p>
            <p style="font-size: 32px; font-weight: bold; margin-top: -10px; margin-bottom: 10px;">{{ $t('activity.globalWeekTitle22') }}</p>
            <p>{{ $t('activity.globalWeekCont2') }}</p>
          </div>
          <div class="carnival-item-ewm">
            <img src="@/assets/img/activity/ambassador/IMQR.jpeg" alt="" class="ewm">
            <p>{{ $t('activity.qrcode1') }}</p>
          </div>
          <span class="date">{{ $t('activity.time2') }}</span>
        </div>
      </div>
      <div class="flexb carnival-list">
        <div class="carnival-item carnival-item-left back3 flexb">
          <div class="carnival-item-cont">
            <img src="@/assets/img/activity/ambassador/tokenpocket.png" alt="" style="margin-left: -8px;">
            <p :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'font-size:26px; margin-bottom: 20px;' : ''">
              {{ $t('activity.globalWeekTitle3') }}
            </p>
            <p>{{ $t('activity.globalWeekCont3') }}</p>
          </div>
          <div class="carnival-item-ewm">
            <img src="@/assets/img/activity/ambassador/TPQR.jpeg" alt="" class="ewm">
            <p>{{ $t('activity.qrcode2') }}</p>
          </div>
          <span class="date">{{ $t('activity.time2') }}</span>
        </div>
        <div class="carnival-item carnival-item-right back4 flexb">
          <div class="carnival-item-cont">
            <img src="@/assets/img/activity/ambassador/et.png" alt="">
            <p>{{ $t('activity.globalWeekTitle4') }}</p>
            <p>{{ $t('activity.globalWeekCont4') }}</p>
          </div>
          <div class="carnival-item-ewm">
            <img src="@/assets/img/activity/ambassador/ETQR.jpg" alt="" class="ewm">
            <p>{{ $t('activity.qrcode3') }}</p>
          </div>
          <span class="date">{{ $t('activity.time3') }}</span>
        </div>
      </div>
      <div class="flexb carnival-list">
        <div class="carnival-item carnival-item-left back1 flexb">
          <div class="carnival-item-cont">
            <img src="@/assets/img/activity/ambassador/bitLogo.png" alt="" style="margin-left: -22px; width: 150px;">
            <p>{{ $t('activity.globalWeekTitle10') }}</p>
            <p>{{ $t('activity.globalWeekCont10') }}</p>
          </div>
          <div class="carnival-item-ewm">
            <img src="@/assets/img/activity/ambassador/BITQR.jpeg" alt="" class="ewm">
            <p>{{ $t('activity.qrcode6') }}</p>
          </div>
          <span class="date">{{ $t('activity.time3') }}</span>
        </div>
        <div class="carnival-item carnival-item-right back2 flexb">
          <div class="carnival-item-cont">
            <img src="@/assets/img/activity/ambassador/yangtuo.png" alt="">
            <p>{{ $t('activity.globalWeekTitle5') }}</p>
            <p>{{ $t('activity.globalWeekCont5') }}</p>
          </div>
          <div class="carnival-item-ewm">
            <img src="@/assets/img/activity/ambassador/YTQR.jpeg" alt="" class="ewm">
            <p>{{ $t('activity.qrcode4') }}</p>
          </div>
          <span class="date">{{ $t('activity.time4') }}</span>
        </div>
      </div>
      <div class="flexb carnival-list">
        <div class="carnival-item carnival-item-left back3 flexb">
          <div class="carnival-item-cont">
            <img
              v-if="$store.state.app.language === 'en' || $store.state.app.language === 'ko'"
              src="@/assets/img/activity/ambassador/math.png" alt="">
            <img v-else src="@/assets/img/activity/ambassador/math-cn.png" alt="" style="width: 200px;">
            <p>{{ $t('activity.globalWeekTitle6') }}</p>
            <p>{{ $t('activity.globalWeekCont6') }}</p>
          </div>
          <div class="carnival-item-ewm">
            <img src="@/assets/img/activity/ambassador/MZQR.jpg" alt="" class="ewm">
            <p>{{ $t('activity.qrcode5') }}</p>
          </div>
          <span class="date">{{ $t('activity.time4') }}</span>
        </div>
        <div class="carnival-item carnival-item-right back4 flexb">
          <div class="carnival-item-cont">
            <img src="@/assets/img/activity/ambassador/weibo.png" alt="" style="height: 45px;">
            <p :style="$store.state.app.language === 'en' ? 'font-size:30px; margin-bottom: 10px;' : ''">{{ $t('activity.globalWeekTitle8') }}</p>
            <p>{{ $t('activity.globalWeekCont8') }}</p>
          </div>
          <!-- <div class="carnival-item-ewm">
            <img src="@/assets/img/activity/ambassador/twitter.png" alt="" class="ewm">
          </div> -->
          <span class="date">{{ $t('activity.time4') }}</span>
        </div>
      </div>
      <div class="flexb carnival-list">
        <div class="carnival-item carnival-item-left back1 flexb">
          <div class="carnival-item-cont">
            <img
              v-if="$store.state.app.language === 'en' || $store.state.app.language === 'ko'"
              src="@/assets/img/activity/ambassador/chattle.png" alt="">
            <img v-else src="@/assets/img/activity/ambassador/chattle-cn.png" alt="" style="width: 200px;">
            <p>{{ $t('activity.globalWeekTitle7') }}</p>
            <p>{{ $t('activity.globalWeekCont7') }}</p>
          </div>
          <div class="carnival-item-ewm">
            <img src="@/assets/img/activity/ambassador/KXQR.jpg" alt="" class="ewm">
            <p>{{ $t('activity.qrcode2') }}</p>
          </div>
          <span class="date">{{ $t('activity.time6') }}</span>
        </div>
        <div class="carnival-item carnival-item-right back2 flexb">
          <div class="carnival-item-cont">
            <img src="@/assets/img/activity/ambassador/bihu.png" alt="" style="margin-left: -11px; width: 170px;">
            <p :style="$store.state.app.language === 'en' ? 'font-size:26px; margin-bottom: 10px;' : ''">{{ $t('activity.globalWeekTitle11') }}</p>
            <p>{{ $t('activity.globalWeekCont11') }}</p>
          </div>
          <div class="carnival-item-ewm">
            <img src="@/assets/img/activity/ambassador/BIHUQR.png" alt="" class="ewm">
            <p>{{ $t('activity.scanCode') }}</p>
          </div>
          <span class="date">{{ $t('activity.time7') }}</span>
        </div>
      </div>
      <div class="flexb carnival-list">
        <div class="carnival-item carnival-item-left back3 flexb">
          <div class="carnival-item-cont">
            <img src="@/assets/img/activity/ambassador/twitter.png" alt="">
            <p :style="$store.state.app.language === 'en' ? 'font-size:26px; margin-bottom: 10px;' : ''">{{ $t('activity.globalWeekTitle9') }}</p>
            <p>{{ $t('activity.globalWeekCont9') }}</p>
          </div>
          <!-- <div class="carnival-item-ewm">
            <img src="@/assets/img/activity/ambassador/twitter.png" alt="" class="ewm">
          </div> -->
          <span class="date">{{ $t('activity.time5') }}</span>
        </div>
      </div>
    </div>
    <!-- 海报列表 -->
    <div class="poster">
      <div class="title2" :style="$store.state.app.language === 'en' ? 'width: 800px;' : ''">
        <img v-if="$store.state.app.language === 'zh-CN'" src="@/assets/img/activity/ambassador/title2.png" alt="">
        <img v-else-if="$store.state.app.language === 'zh-TW'" src="@/assets/img/activity/ambassador/title2.png" alt="">
        <img v-else-if="$store.state.app.language === 'ko'" src="@/assets/img/activity/ambassador/title2-ko.png" alt="">
        <img v-else src="@/assets/img/activity/ambassador/title2-en.png" alt="">
        <div class="flexc tip">
          <i class="iconfont icon-shuoming"></i>
          <span>{{ $t('activity.noSequence') }}</span>
        </div>
      </div>
      <div class="poster-cont flexb">
        <div class="poster-img">
          <img v-if="$store.state.app.language === 'zh-CN'" src="@/assets/img/activity/ambassador/shouji.png" alt="">
          <img v-else-if="$store.state.app.language === 'zh-TW'" src="@/assets/img/activity/ambassador/shouji-tw.png" alt="">
          <img v-else-if="$store.state.app.language === 'ko'" src="@/assets/img/activity/ambassador/shouji-ko.png" alt="">
          <img v-else src="@/assets/img/activity/ambassador/shouji-en.png" alt="">
        </div>
        <div class="poster-list">
          <div class="click-tip">
            <span class="hand"></span>
            {{ $t('activity.clickOn') }}
          </div>
          <ul>
            <li class="poster-item" v-for="(item, index) in codeList" :key="index" @click="handleToposter(item.code)">
              <p>{{ item.declaration }}</p>
              <div class="flexb share">
                <div>
                  <i class="iconfont icon-fenxiang"></i> {{ $t('activity.shareNewdex') }}
                </div>
                <span v-if="item.logoUrl"><img :src="item.logoUrl" alt="" class="logoImg"></span>
                <span v-else>—— {{ item.name }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="input-name">
        <div class="caption">
          <i class="iconfont icon-bibibi"></i>
          {{ $t('activity.enterYourName') }}
        </div>
        <div class="flex" style="width: 584px;">
           <el-input v-model="nameValue" maxlength="15" :placeholder="$t('activity.inputYourName')" style="margin-right: 20px;"/>
           <el-button type="primary" @click="handleApplyPost">{{ $t('activity.toPoster') }}</el-button>
        </div>
      </div>
      <div class="footer-tip">{{ $t('activity.toNewdex') }}</div>
    </div>
    <!-- 弹窗 -->
    <div class="layer" v-if="layerHide" @click="handleCloseLayer">
      <div class="layer-cont">
        <div class="closeBtn iconfont el-icon-close" @click="handleCloseLayer"></div>
        <img :src="shareImg" alt="">
        <!-- <div class="hide-other" :style="$store.state.app.language !== 'en' ? 'bottom: 68px' : ''"> -->
        <div class="hide-other" :class="{'nameCode': nameCodeValue}">
          <div class="code" v-loading="codeLoading">
            <canvas class="codeCanvas" id="codeShare"></canvas>
            <p>{{ $t('activity.scanQrCode') }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 视频播放组件 -->
    <my-video
    :video-config="videoConfig"
    @listenVideoLevel="handleVideoLevel"/>
  </div>
</template>

<script>
import MyVideo from '@/components/Video';
import { QRcodeCode } from '@/utils/validate';

export default {
  name: 'ambassador', // 大使活动
  components: {
    MyVideo,
  },
  data() {
    return {
      videoUrl: '',
      videoConfig: {
        open: false,
        en: 'https://www.youtube.com/embed/ci1_8__jPQU?rel=0&amp;controls=0&amp;showinfo=0', // 国外访问视频地址
        zh: 'https://newdex.oss-cn-hangzhou.aliyuncs.com/newdex-ambassador.mp4' // 国内
      },
      layerHide: false, // 弹窗显示值
      nameValue: '', // 海报名字
      shareImg: '', // 分享图片
      codeLoading: false,
      codeList: [], // 海报列表
      isClick: true, // 避免重复点击
      nameCodeValue: false, // 点击名字生成
    }
  },
  props: {},
  watch: {
    '$store.state.app.language': function change() {
      this.handleGetList();
    },
  },
  computed: {},
  created() {
    document.title = this.$t(`rout.${this.$route.meta.title}`);
  },
  mounted() {
    this.handleGetList();
  },
  beforeDestroy() {},
  methods: {
    // 视频播放
    handlePlayVideo() {
      const userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串
      this.videoUrl = this.videoConfig.en;
      const lang = this.$store.state.app.language;
      if (lang === 'zh-CN' || lang === 'zh-TW') {
        this.videoUrl = this.videoConfig.zh;
      }
      if (userAgent.indexOf('Safari') > -1 && userAgent.indexOf('Chrome') === -1) {
        setTimeout(() => {
          this.$refs.videoHref.click();
        }, 500)
        return;
      }
      this.videoConfig.open = true;
    },
    // 关闭视频通知
    handleVideoLevel(val) {
      if (val === 'close') {
        this.videoConfig.open = false;
      }
    },
    handleGetList() {
      this.$http.get('/ambassador/getDeclarationList').then((res) => {
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        this.codeList = res.declarationList;
      });
    },
    // 生成海报
    handleApplyPost() {
      if (!this.nameValue) {
        this.$message.error(this.$t('activity.inputYourName'));
        return;
      }
      // 防止重复点击
      if (this.isClick) {
        this.isClick = false;
        setTimeout(() => {
          this.isClick = true;
        }, 1000);
      } else {
        return;
      }
      // this.codeLoading = true;
      const params = {
        name: this.nameValue,
      };
      this.$http.get('/ambassador/generateByName', { params }).then((res) => {
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        this.nameCodeValue = true;
        this.shareImg = res.imageUrl;
        setTimeout(() => {
          this.handleGetPayCode(res.imageUrl);
        }, 100);
        this.layerHide = true;
        this.nameValue = '';
      });
    },
    // 列表生成海报
    handleToposter(code) {
      const lang = this.$store.state.app.language;
      let imageUrl = `https://newdex-pic.oss-cn-hongkong.aliyuncs.com/a/${lang}/${code}.png`;
      this.shareImg = imageUrl;
      // imageUrl = imageUrl.replace(' ', '%20');
      imageUrl = encodeURI(imageUrl);
      setTimeout(() => {
        this.handleGetPayCode(imageUrl);
      }, 100);
      this.layerHide = true;
    },
    // 关闭分享
    handleCloseLayer() {
      this.nameCodeValue = false;
      this.layerHide = false;
    },
    // 二维码生成
    handleGetPayCode(imgUrl) {
      const canvas = document.getElementById('codeShare');
      if (canvas) {
        setTimeout(() => {
          QRcodeCode(imgUrl, canvas, 100, (err) => {
            // this.codeLoading = false;
            if (err) {
              this.$message.error(this.$t('jy.codeError'));
            }
          })
        }, 100)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.back1 {
  background: linear-gradient(to right, #9b4ee3 , #442ec3);
}

.back2 {
  background: linear-gradient(to right, #6363e2 , #d57fad);
}

.back3 {
  background: linear-gradient(to right, #505edf , #8c8cec);
}

.back4 {
  background: linear-gradient(to right, #3382ec , #5fa1ef);
}

.layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100000;

  .layer-cont {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 380px;
    height: 670px;
    background: #fff;
    transform: translate(-50%, -50%);

    .closeBtn {
      position: absolute;
      top: -0;
      right: -40px;
      font-size: 30px;
      color: #fff;
      cursor: pointer;
    }

    img {
      width: 100%;
      display: block;
      vertical-align: middle;
    }

    .hide-other {
      position: absolute;
      bottom: 60px;
      width: 83.2%;
      left: 50%;
      transform: translateX(-50%);
      color: #333;
      font-size: 12px;
      background: #fff;
      border-top-right-radius: 70px;

      .code {
        text-align: center;
        width: 100%;
        height: 115px;

        p {
          margin-top: -3px;
        }
      }
    }


    .nameCode {
      bottom: 53px;

      .code {
        height: 118px;
      }
    }
  }
}

.ambassador{
  background: #020d33;
  width: 100%;
  min-height: 1300px;
  padding-top: 140px;
  margin-bottom: -1px;

  .title {
    height: 60px;
    margin-bottom: 70px;

    img {
      display: block;
      height: 100%;
      vertical-align: middle;
    }
  }

  .title1 {
    height: 120px;
    margin: 70px 0 50px;

    img {
      display: block;
      height: 100%;
      vertical-align: middle;
    }
  }

  .ambassador-vedio {
    width: 1045px;
    height: 280px;
    margin: 0 auto;
    background: url('../../../assets/img/activity/ambassador/banner.png') center center no-repeat;
    background-size: cover;
    color: #D4E2FF;

    .ambassador-vedio-left {
      padding-top: 20px;
      width: 48%;

      p:nth-child(1) {
        font-size: 31px;
      }

      p:nth-child(2) {
        font-size: 31px;
      }

      p:nth-child(3) {
        font-size: 16px;
        margin: 10px 0 20px;
      }

      p:nth-child(4) {
        font-size: 14px;
        margin-bottom: 30px;
      }

      .btn {
        span {
          cursor: pointer;
        }

        span:nth-child(1) {
          padding: 5px 30px;
          text-align: center;
          background: #FDFEFF;
          border-radius: 3px;
          color: #020D33;
          margin-right: 10px;
        }

        span:nth-child(2) {
          color: #B3A6FF;
          text-decoration: underline;
        }
      }
    }

    .ambassador-vedio-right {
      width: 45%;
      height: 100%;
      background: url('../../../assets/img/activity/ambassador/video.png');
      position: relative;

      .video-btn {
        position: absolute;
        width: 50px;
        height: 50px;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        background: url('../../../assets/img/videoplay.png');
        background-size: cover;
        cursor: pointer;
      }
    }
  }

  .carnival-cont {
    position: relative;
    width: 1260px;
    margin: 0 auto 60px;
    color: #fff;

    &::before {
      position: absolute;
      content: '';
      left: 50%;
      top: 50%;
      display: block;
      width: 1px;
      height: 100%;
      background: #9F9FFF;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

    .carnival-list {
      position: relative;
      height: 238px;
      margin-bottom: 40px;

      &::before {
        position: absolute;
        content: '';
        left: 50%;
        top: 50%;
        display: block;
        width: 18px;
        height: 18px;
        background: #9F9FFF;
        border-radius: 50%;
        transform: translate(-50%, -50%);
      }
      .carnival-item {
        position: relative;
        width: 47%;
        height: 100%;
        border-radius: 15px;
        padding: 35px 15px 35px 30px;

        .date {
          position: absolute;
          right: 0;
          top: 0;
          display: block;
          width: 140px;
          height: 37px;
          background: url('../../../assets/img/activity/ambassador/jiaobiao.png') center center no-repeat;
          background-size: 100% 100%;
          line-height: 37px;
          text-align: center;
        }

        img {
          display: block;
          width: 130px;
          vertical-align: middle;
          margin-left: -13px;
          // margin-bottom: 20px;
        }

        p:nth-child(2) {
          font-size: 32px;
          font-weight: bold;
          margin: 10px 0 20px;
        }

        p:nth-child(3) {
          font-size: 14px;
        }

        .carnival-item-cont {
          flex: 5;
        }

        .carnival-item-ewm {
          flex: 1;
          padding-left: 10px;
          width: 120px;

          p {
            text-align: center;
            font-size: 12px;
            margin: 0;
            font-weight: 100;
            width: 113px;
          }

          img {
            // margin: auto;
            margin-top: 40px;
            display: inline-block;
            width: 85px;
            height: 85px;
            margin-left: 15px;
            margin-bottom: 5px;
          }
        }
      }

      .carnival-item-left {
        &::before {
          position: absolute;
          content: '';
          right: -15px;
          top: 50%;
          display: block;
          transform: translateY(-50%);
          border-width: 15px 0 15px 15px;
          border-style: solid;
          border-color: transparent transparent transparent #333;
        }
      }

      .carnival-item-right {
        &::before {
          position: absolute;
          content: '';
          left: -15px;
          top: 50%;
          display: block;
          transform: translateY(-50%);
          border-width: 15px 15px 15px 0;
          border-style: solid;
          border-color: transparent #442ec3 transparent transparent;
        }
      }
      .back1 {
        &::before {
          border-color: transparent transparent transparent #442ec3;
        }
      }

      .back2 {
        &::before {
          border-color: transparent #6363e2 transparent transparent;
        }
      }

      .back3 {
        &::before {
          border-color: transparent transparent transparent #8c8cec;
        }
      }

      .back4 {
        &::before {
          border-color: transparent #3382ec transparent transparent;
        }
      }
    }
  }

  .poster {
    padding-top: 10px;
    background: #241858;

    .poster-cont {
      width: 1280px;
      margin: 0 auto;
      // height: 800px;
      padding-bottom: 40px;
      color: #fff;

      .poster-img {
        position: relative;
        width: 360px;
        height: 620px;
        margin-left: 50px;

        &::before {
          position: absolute;
          content: '';
          right: -20%;
          top: 50%;
          width:0;
          height:0;
          border-width: 30px 15px 30px 0;
          border-style: solid;
          border-color: transparent #967DFF transparent transparent;
          transform: translateY(-50%);
        }

        img {
          display: block;
          vertical-align: middle;
          width: 100%;
        }
      }

      .poster-list {
        position: relative;
        height: 750px;

        .click-tip {
          position: absolute;
          right: 10px;
          top: -30px;
          background: #967DFF;
          // width: 200px;
          height: 30px;
          line-height: 30px;
          border-radius: 50px;
          text-align: center;
          padding: 0 20px 0 25px;

          .hand {
            position: absolute;
            display: block;
            left: -9px;
            top: -2px;
            width: 30px;
            height: 30px;
            background: url('../../../assets/img/activity/ambassador/hand.png') center center no-repeat;
            background-size: 100% 100%;
          }
        }

        ul {
          overflow: auto;
          width: 750px;
          height: 700px;
          padding-right: 10px;
          box-sizing: border-box;

          &::-webkit-scrollbar {
            width: 5px;
            height: 5px;
            background-color: rgba(0, 0, 0, 0);
            border-radius: 15px;
          }
          /*定义滚动条的轨道，内阴影及圆角*/
          &::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
            border-radius: 0;
            background-color: rgba(0, 0, 0, 0);
            border-radius: 15px;
          }
          /*定义滑块，内阴影及圆角*/
          &::-webkit-scrollbar-thumb {
            /*width: 10px;*/
            /*height: 25px;*/
            -webkit-box-shadow: inset 0 0 0 rgba(255, 255, 255, .1);
            background-color: rgba(255, 255, 255, .1);
            border-radius: 15px;
          }

          .poster-item {
            // height: 160px;
            background: #2F266D;
            border-radius: 15px;
            margin-bottom: 15px;
            padding: 34px 50px;
            cursor: pointer;

            p {
              line-height: 28px;
            }

            .share {
              margin-top: 20px;
            }

            .logoImg {
              width: 135px;
            }
          }
        }
      }
    }

    .input-name {
      width: 600px;
      margin: 0 auto;
      color: #fff;

      .caption {
        margin-bottom: 10px;
      }
    }

    .footer-tip {
      color: #fff;
      text-align: center;
      padding: 80px 0 70px;
    }
  }

  .title2 {
    width: 400px;
    height: 80px;
    margin: 70px auto 50px;

    img {
      display: block;
      height: 100%;
      vertical-align: middle;
    }

    .tip {
      margin-top: 10px;
      color: #8997C6;
    }
  }
}
</style>
